<template>
  <view class="su-table" :class="{ 'su-table--flex': flex }">
    <nut-table
      :columns="columns"
      :data="data"
      :striped="striped"
      :summary="summary"
      :bordered="bordered"
    >
      <template v-for="slot in Object.keys($slots)" #[slot]="scope">
        <slot v-bind="scope" :name="slot" />
      </template>
    </nut-table>
  </view>
</template>

<script setup>
import { useVModel } from '@vueuse/core';

defineOptions({
  name: 'SuTable'
});
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  option: {
    type: Object,
    default: () => ({})
  },
  flex: {
    type: Boolean,
    default: () => false
  }
});
const emit = defineEmits(['update:modelValue']);
const data = useVModel(props, 'modelValue', emit);
console.log('🚀 ~ data:', data);
const { option } = props;

const align = computed(() => {
  return option.align || 'left';
});
const striped = computed(() => {
  return option.striped || true;
});
const bordered = computed(() => {
  return option.bordered || true;
});
const summary = computed(() => {
  return option.summary;
});
const columns = computed(() => {
  const column = option.column || [];
  return column.reduce((a, c) => {
    a.push({
      ...c,
      title: c.label,
      key: c.prop,
      align: align.value
    });
    return a;
  }, []);
});
</script>

<style lang="scss">
.su-table {
  @include wh(100%, 100%);
  &--flex {
    .nut-table {
      @include wh(100%, 100%);
      overflow-y: auto;
    }
    .nut-table__main {
      @include wh(100%, 100%);
      position: relative;
      &__head {
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: center;
      }
    }
  }
}
</style>
